<template>
  <el-dialog
    :title="'Working Hours'"
    :visible.sync="editDialog"
    :append-to-body="true"
    width="70%"
    :before-close="handleClose">
    <div class="xlSeeFrom">
      <div class="time">
        <div class="time-tit">
          <div class="item">
            <div class="title">Working Hours</div>
          </div>
        </div>
        <div class="time-flex">
          <el-table
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            :data="tableData"
            ref="tableData"
            height="335px"
            tooltip-effect="dark"
            border
            stripe
            style="width:100%">
            <el-table-column
            label="S/N"
            type="index"
            width="60"
            align="center">
            </el-table-column>
            <el-table-column
            label="Project"
            align="center"
            prop="project_name">
            </el-table-column>
            <el-table-column
            label="Working Hours"
            align="center"
            prop="work_hour">
            </el-table-column>
            <el-table-column
            label="Amount(contract currency)"
            align="center"
            prop="amount">
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">Close</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { seeWorkingHours } from '@/request/other_api'
export default {
  data(){
    return {
      editDialog:false,
      //分配项目工时表的数据
      tableData:[],
    }
  },
  methods:{
    formatData(form,pe_username){
      seeWorkingHours({
        pe_username:pe_username,
        salary_id:form.salary_id
      }).then(res => {
        this.tableData = res.data.projects
      })
    },
    amountFormate(row){
      return row.amount.toFixed(2)
    },
    handleClose (done) {
      this.editDialog = false
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-form-item__label {
  background-color: #eee;
  text-align: center;
  //width: 121px;
}
/deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #eee;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  color: #333;
  font-size: 15px;
  word-break: break-all;
}
.tab-item{
  width: 100%;
  padding: 10px 0;
  border: 1px solid #eee;

  table{
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
  }
  table td{
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #999999;
  }
  table tr td:nth-child(2n+1){
    background-color: #eee;
    width: 13%;
    text-align: center;
  }

  .tab-title{
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 20px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 30px;
    text-decoration: none;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
  }
  /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }

}

.time{
  .time-tit{
    display: flex;
    justify-content: space-between;
    margin: 5px;
    .title{
      font-family: SourceHanSansSC;
      font-weight: 700;
      font-size: 20px;
      color: rgb(16, 16, 16);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 30px;
      text-decoration: none;
    }
  }
  .time-flex{
    display: flex;
    .time-item{
      margin-right: 25px;
    }
    .time-item:last-child{
      margin-right: 0;
    }
  }
}
</style>
